<template>
    <div class="setLogin">
        <div class="top">
            <span class="iconfont icon-fanhui" @click.stop="back"></span>
            设置
        </div>
        <div class="setList">
            <div class="setItem">
                账号资料
                <span class="iconfont icon-dayu"></span>
            </div>
            <div class="setItem">
                账号安全中心
                <span class="iconfont icon-dayu"></span>
            </div>
            <div class="setItem">
                消息设置
                <span class="iconfont icon-dayu"></span>
            </div>
            <div class="setItem">
                关闭流量阅读提醒
                <van-switch v-model="checked1" />
            </div>
            <div class="setItem">
                音量键控制阅读翻页
                <van-switch v-model="checked2" />
            </div>
            <div class="setItem">
                允许移动网络缓存漫画
                <van-switch v-model="checked3" />
            </div>
            <div class="setItem">
                首页推荐设置
                <div>
                    <van-cell is-link @click.stop="showPopup(1)">{{ value1 }}</van-cell>
                    <van-popup v-model="show1" position="bottom" :style="{ height: '25%' }">
                        <div
                            class="mode"
                            v-for="(item, i) in mode1"
                            :key="i"
                            @click.stop="active(1, i)"
                        >
                            {{ item }}
                            <img
                                v-if="currentIndex1 == i"
                                src="../assets/images/select.png"
                                alt=""
                            />
                        </div>
                    </van-popup>
                </div>
            </div>
            <div class="setItem">
                深色模式
                <div>
                    <van-cell is-link @click.stop="showPopup(2)">{{ value2 }}</van-cell>
                    <van-popup v-model="show2" position="bottom" :style="{ height: '30%' }">
                        <div
                            class="mode"
                            v-for="(item, i) in mode2"
                            :key="i"
                            @click.stop="active(2, i)"
                        >
                            {{ item }}
                            <img
                                v-if="currentIndex2 == i"
                                src="../assets/images/select.png"
                                alt=""
                            />
                        </div>
                    </van-popup>
                </div>
            </div>
            <div class="setItem">
                自动清理临时文件
                <div>
                    <van-cell is-link @click.stop="showPopup(3)">{{ value3 }}</van-cell>
                    <van-popup v-model="show3" position="bottom" :style="{ height: '60%' }">
                        <div
                            class="mode"
                            v-for="(item, i) in mode3"
                            :key="i"
                            @click.stop="active(3, i)"
                        >
                            {{ item }}
                            <img
                                v-if="currentIndex3 == i"
                                src="../assets/images/select.png"
                                alt=""
                            />
                        </div>
                    </van-popup>
                </div>
            </div>
            <div class="setItem">
                权限与账号管理
                <span class="iconfont icon-dayu"></span>
            </div>
            <div class="setItem">
                用户协议
                <span class="iconfont icon-dayu"></span>
            </div>
            <div class="setItem">
                隐私政策
                <span class="iconfont icon-dayu"></span>
            </div>
            <div class="setItem">
                关于我们
                <span class="iconfont icon-dayu"></span>
            </div>
            <van-button
                v-if="loginToken"
                @click.stop="loginOut"
                class="btn"
                round
                plain
                size="large"
                type="info"
                >退出登录</van-button
            >
        </div>
    </div>
</template>

<script>
import router from "@/router";
import { mapState } from "vuex";
export default {
    data() {
        return {
            checked1: true,
            checked2: true,
            checked3: false,
            show1: false,
            show2: false,
            show3: false,
            mode1: ["双列模式", "单列模式"],
            value1: "",
            mode2: ["普通模式", "深色模式"],
            value2: "",
            mode3: ["不清理", "100MB", "200MB", "300MB", "500MB", "1GB"],
            value3: "",
            currentIndex1: 0,
            currentIndex2: 0,
            currentIndex3: 3,
            loginToken: void 0,
        };
    },
    created() {
        this.value1 = this.mode1[this.currentIndex1];
        this.value2 = this.mode2[this.currentIndex2];
        this.value3 = this.mode3[this.currentIndex3];
        this.loginToken = localStorage.getItem("login");
    },
    computed: {
        ...mapState(["islogin"]),
    },
    methods: {
        showPopup(i) {
            if (i == 1) {
                this.show1 = true;
            }
            if (i == 2) {
                this.show2 = true;
            }
            if (i == 3) {
                this.show3 = true;
            }
        },
        back() {
            router.back();
        },
        active(num, i) {
            if (num == 1) {
                this.currentIndex1 = i;
                this.value1 = this.mode1[this.currentIndex1];
            }
            if (num == 2) {
                this.currentIndex2 = i;
                this.value2 = this.mode2[this.currentIndex2];
            }
            if (num == 3) {
                this.currentIndex3 = i;
                this.value3 = this.mode3[this.currentIndex3];
            }
        },
        loginOut() {
            this.$dialog
                .alert({
                    message: "退出登录成功",
                })
                .then(() => {
                    this.$store.commit("loginOut", true);
                    localStorage.clear("login");
                    router.push("/user");
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.setLogin {
    position: relative;
    .top {
        text-align: center;
        font-size: 16px;
        line-height: 45px;
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        z-index: 100;
        background: #fff;
        border-bottom: 1px solid #ebecee;
        span {
            position: absolute;
            left: 12px;
            top: 0;
            bottom: 0;
        }
    }
    .setList {
        margin-top: 45px;
        padding: 0 15px;
        .setItem {
            display: flex;
            padding: 15px 0;
            font-size: 14px;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ebecee;
            .mode {
                display: flex;
                justify-content: space-between;
                margin: 0 15px;
                padding: 20px 0;
                border-bottom: 1px solid #ebecee;
                img {
                    width: 16px;
                }
            }
            .van-cell {
                padding: 0;
            }
        }
        .btn {
            margin: 30px 0;
        }
    }
}
</style>
